import React from 'react';
import LinuxCommandGenerator from '@/components/LinuxCommandGenerator';
import { ArrowLeft, Terminal } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';

const LinuxCommandGeneratorPage = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        <div className="mb-6">
          <Button asChild variant="ghost">
            <Link to="/" className="flex items-center gap-2">
              <ArrowLeft size={16} />
              返回首页
            </Link>
          </Button>
        </div>
        
        <div className="flex items-center gap-3 mb-6">
          <Terminal className="text-yellow-500" size={32} />
          <h1 className="text-2xl md:text-3xl font-bold text-gray-800">Linux 命令生成器</h1>
        </div>
        
        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
          <LinuxCommandGenerator />
        </div>
        
        <div className="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
          <h2 className="text-lg font-semibold mb-3">使用说明</h2>
          <ul className="list-disc pl-5 space-y-2 text-gray-700">
            <li>选择您使用的Linux发行版</li>
            <li>用自然语言描述您想要执行的操作</li>
            <li>系统将自动生成对应的终端命令</li>
            <li>支持复制生成的命令到剪贴板</li>
            <li>适用于Ubuntu、CentOS、Kali等主流发行版</li>
          </ul>
          
          <h2 className="text-lg font-semibold mt-6 mb-3">支持的命令类型</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">软件管理</h3>
              <p className="text-sm text-gray-600">安装、更新、卸载软件包</p>
            </div>
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">系统管理</h3>
              <p className="text-sm text-gray-600">用户、权限、服务管理</p>
            </div>
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">网络工具</h3>
              <p className="text-sm text-gray-600">网络配置、扫描、监控</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LinuxCommandGeneratorPage;
